Easy2Siksha.com

GNDU Question Paper-2024

B.A 5

Semester

COMPUTER APPLICATIONS

(Internet & Web Designing)

Time Allowed: Three Hours Max. Marks:75

Note: Attempt Five questions in all, selecting at least One question from each section. The

Fifth question may be attempted from any section. All questions carry equal marks.

SECTION-A

1. Compare and contrast different types of network topologies, such as bus, star, ring and

mesh. Discuss the advantages and disadvantages of each topology and their practical

applications.

2. Describe the basic architecture of the Internet, including the role of ISPs (Internet

Service Providers), routers, servers and clients. Explain how data is transmitted across the

Internet.

SECTION-B

3. Discuss the architecture of email server and differentiate between POP3 and IMAP

email protocols. Highlight the advantages and disadvantages of each protocol in managing

email on different devices.

4. Discuss the function and key features of a modern web browser. Also discuss rendering,

compatibility, security and privacy issues in browsing. Also discuss the role of browser

extensions.

Easy2Siksha.com

SECTION-C

5. Discuss the architecture and working of file transfer protocol. Also discuss

authentication and other security issues with FTP and its role in web deployment.

6. Explain the importance of website performance optimization in web designing. Discuss

techniques and strategies to improve website speed, including image optimization,

caching and code minification.

SECTION-D

7. Explain the concept of HTML lists. Differentiate between ordered and unordered lists

and describe how to create nested lists using HTML. Provide examples to illustrate your

points.

8. Describe the use of HTML tables in website design. Explain how to create a simple table,

merge cells and add headers and footers to a table. Discuss when tables should be used

and when other layout techniques are more appropriate.

Easy2Siksha.com

GNDU Answer Paper-2024

B.A 5

Semester

COMPUTER APPLICATIONS

(Internet & Web Designing)

Time Allowed: Three Hours Max. Marks:75

Note: Attempt Five questions in all, selecting at least One question from each section. The

Fifth question may be attempted from any section. All questions carry equal marks.

SECTION-A

1. Compare and contrast different types of network topologies, such as bus, star, ring and

mesh. Discuss the advantages and disadvantages of each topology and their practical

applications.

Ans: 󺡒󺡓󺡔󺡕󺡖󺡗󺡘󺡙󺡚󺡛 The Story Begins: A City of Roads

Imagine you are standing in a big city. Every house in this city represents a computer, and

the roads that connect them represent the network cables or connections. Now, the way

these houses are connected by roads determines how people can travel and interact.

Similarly, in computer science, the way computers are arranged and connected in a network

is called Network Topology.

There are different “road maps” (or topologies), and each has its own beauty, strengths, and

weaknesses. Let’s visit the most famous ones: Bus, Star, Ring, and Mesh.

󺝚󺝛󺝜󺝝󺝞󺝟󺝠 1. The Bus Topology – The Straight Road

Think of a single, long straight road in the middle of the city. All the houses (computers) are

built along this one road. If someone shouts a message on this road, every house hears it,

but only the intended one responds.

Diagram (Bus Topology):

Computer --- Computer --- Computer --- Computer

Easy2Siksha.com

Main Cable (Bus Line)

Advantages:

• Cost-effective: Only one main cable is required, so it’s cheap and easy to install.

• Simple design: Easy to set up for small networks.

Disadvantages:

• Traffic jams: If too many people shout on the same road, it becomes noisy (data

collisions).

• Weak link: If the main road (cable) breaks, the whole city shuts down.

• Limited growth: Adding more houses increases congestion.

Practical Applications:

Used in small offices or classrooms where the number of computers is limited and budget is

tight.

󽇐 2. The Star Topology – The Town Square

Now imagine a big town square in the middle, and every house has its own road directly

connected to this square. The town square is like the central hub or switch. If one house

wants to send a message, it first goes to the square, and from there it is sent to the right

house.

Diagram (Star Topology):

Computer

Computer -- Hub/Switch -- Computer

Computer

Advantages:

• No traffic jam: Each house has a separate road, so no shouting chaos like in Bus.

• Easy troubleshooting: If one road breaks, only that house is affected; others

continue.

• Scalable: New houses can be easily connected by building a new road to the square.

Disadvantages:

• Expensive: Requires more roads (cables) and the central hub.

• Single point of failure: If the town square (hub) breaks, the entire city collapses.

Easy2Siksha.com

Practical Applications:

Most modern offices, schools, and home Wi-Fi routers use star topology because it is

reliable and efficient.

󷄧󹹯󹹰 3. The Ring Topology – The Circular Highway

Picture a circular highway that goes around the city. Every house is built on this circle. A

message travels in one direction around the circle until it reaches the correct house.

Diagram (Ring Topology):

Computer --- Computer --- Computer

| |

-----------Circle------------

Advantages:

• Orderly traffic: No data collision because each message follows a direction around

the circle.

• Equal opportunity: Every house gets a fair chance to speak.

Disadvantages:

• Fragile: If one house or road in the circle breaks, the entire highway system fails.

• Slower: Messages must travel through several houses before reaching the

destination.

Practical Applications:

Used in older telephone networks and sometimes in local area networks (LANs) before star

topology became popular.

󺂧 4. The Mesh Topology – The Spider’s Web

Now, imagine a spider’s web where every house is connected to every other house

directly. There are multiple paths, so if one road breaks, people can still take another.

Diagram (Mesh Topology):

Computer ---- Computer

|\ /|

| \ / |

Computer ---- Computer

Easy2Siksha.com

Advantages:

• Highly reliable: If one road is blocked, you can still take another.

• No traffic problems: Multiple routes make communication very smooth.

• Very secure: Messages can take direct paths, reducing chances of interception.

Disadvantages:

• Very costly: Requires a huge number of roads (cables), making it expensive.

• Complex setup: Difficult to install and maintain because of so many connections.

Practical Applications:

Used in military communication systems, airline networks, and other areas where failure is

not an option.

󽀼󽀽󽁀󽁁󽀾󽁂󽀿󽁃 Comparing the Topologies (Quick Recap)

Topology

Structure

Advantages

Disadvantages

Applications

Bus

Single main cable

Cheap, simple

Cable failure = total

failure, collisions

Small offices

Star

Central hub with

spokes

Reliable,

scalable

Hub failure = total

failure, costly

Homes, offices

Ring

Circular path

No collisions,

fair chance

Break at one point =

failure, slow

Telephone

systems

Mesh

Fully

interconnected

Very reliable,

secure

Expensive, complex

Military, critical

networks

󷘹󷘴󷘵󷘶󷘷󷘸 Conclusion: Choosing the Right Map

So, just like city planners choose different road maps depending on the budget, size, and

importance of the city, network designers also choose different topologies based on needs.

• If cost is important → Bus is chosen.

• If efficiency and scalability matter → Star is the king.

• If fairness is needed → Ring can be used.

• If security and reliability are non-negotiable → Mesh is unbeatable.

In short, there is no one-size-fits-all. Each topology has its own personality, just like cities

have different layouts. And that’s what makes networking both practical and fascinating.

Easy2Siksha.com

2. Describe the basic architecture of the Internet, including the role of ISPs (Internet

Service Providers), routers, servers and clients. Explain how data is transmitted across the

Internet.

Ans: One evening, imagine you type www.example.com into your browser. Within seconds,

the page appears on your screen. It feels magical, almost instantaneous. But behind this

simple act lies a vast, invisible architecture—the Internet—a global web of connections,

machines, and protocols working together like a perfectly choreographed dance. To truly

appreciate this marvel, let’s peel back the curtain and explore the basic architecture of the

Internet, the roles of ISPs, routers, servers, and clients, and how data actually travels across

this digital highway.

󷊆󷊇 The Internet as a Global Network of Networks

The Internet is not a single machine or a single network. It is a network of networks—

millions of private, public, academic, business, and government networks all

interconnected. Its architecture is layered and hierarchical, ensuring that no single entity

owns or controls the entire system.

At its core, the Internet is built on four essential players:

1. ISPs (Internet Service Providers) – the gateways that connect us.

2. Routers – the traffic directors of the Internet.

3. Servers – the information warehouses.

4. Clients – the devices (like your laptop or phone) that request and consume

information.

󷈷󷈸󷈹󷈺󷈻󷈼 The Role of ISPs (Internet Service Providers)

Think of ISPs as the bus companies of the Internet highway. Without them, you cannot

even get onto the road.

• What they do: ISPs provide the physical and logical connection to the Internet. They

own the infrastructure—fiber optic cables, satellites, towers, and data centers—that

link your home or office to the global network.

• Types of ISPs:

o Local ISPs: The ones you subscribe to at home (like Airtel, Jio, BSNL in India).

o Regional ISPs: Larger providers that connect local ISPs to the backbone.

o Backbone ISPs (Tier 1): Giants like AT&T, Tata Communications, or NTT that

own massive undersea cables and high-speed fiber lines spanning continents.

Without ISPs, your device would be like a car without a road—ready to move but with

nowhere to go.

󷈷󷈸󷈹󷈺󷈻󷈼 Routers: The Traffic Police of the Internet

Once you’re on the road, who tells your data where to go? That’s the job of routers.

Easy2Siksha.com

• What they do: Routers are specialized devices that direct data packets from one

network to another. They examine the destination address on each packet and

decide the best path to forward it.

• Analogy: Imagine a city with countless intersections. Routers are like traffic police at

every junction, ensuring that vehicles (data packets) take the right turn to reach their

destination.

• Hierarchy:

o Home Routers: The small box in your house that connects your devices to

your ISP.

o ISP Routers: Larger, more powerful routers that handle thousands of

connections.

o Core Routers: Massive machines at the Internet backbone that handle

millions of packets per second.

Routers ensure that even if one road is blocked (say, a cable is cut), your data can be

rerouted through another path. This makes the Internet resilient.

󷈷󷈸󷈹󷈺󷈻󷈼 Servers: The Information Warehouses

When you type www.example.com, where does the information come from? From a server.

• What they do: Servers are powerful computers that store websites, applications,

videos, and files. They “serve” this information when requested by clients.

• Types of servers:

o Web servers: Host websites.

o Mail servers: Handle email.

o File servers: Store and share files.

o Application servers: Run apps like banking systems or social media platforms.

Servers are like libraries—they hold the books (data) and lend them out when someone

asks.

󷈷󷈸󷈹󷈺󷈻󷈼 Clients: The End Users

Finally, we come to clients—the devices we use every day.

• What they do: Clients are laptops, smartphones, or tablets that request information

from servers.

• Analogy: If servers are libraries, clients are the readers who borrow books.

• Client-Server Model: This is the backbone of Internet communication. The client

requests, the server responds.

󽀼󽀽󽁀󽁁󽀾󽁂󽀿󽁃 How Data Travels Across the Internet

Now let’s put it all together. Suppose you want to watch a video on YouTube. Here’s the

journey of your request:

Easy2Siksha.com

1. Typing the URL: You enter www.youtube.com.

2. DNS Resolution: Your request first goes to a Domain Name System (DNS) server,

which translates the human-friendly name into an IP address (like 142.250.190.78).

3. ISP Connection: Your device sends the request to your ISP, which forwards it to the

wider Internet.

4. Routers at Work: Routers along the way examine the packet’s destination and

forward it step by step, possibly across continents via undersea cables.

5. Reaching the Server: The request arrives at YouTube’s servers, which locate the

video you want.

6. Response Packets: The server breaks the video into small packets of data and sends

them back along the network.

7. Reassembly: Your device receives the packets, reassembles them in the correct

order, and plays the video seamlessly.

This entire process happens in milliseconds, giving the illusion of instant access.

󷇮󷇭 The Packet-Switching Principle

The Internet relies on packet switching:

• Data is broken into small packets.

• Each packet may take a different route to the destination.

• At the destination, packets are reassembled.

This method is efficient, fault-tolerant, and allows millions of users to share the same

network simultaneously.

󹶓󹶔󹶕󹶖󹶗󹶘 Diagram of Internet Architecture

Here’s a simple conceptual diagram:

Each arrow represents data traveling through cables, satellites, or wireless signals, guided by

routers and managed by ISPs.

󼩺󼩻 Why This Architecture Works

Easy2Siksha.com

• Decentralization: No single authority controls the Internet. This makes it robust and

democratic.

• Scalability: New networks, servers, and clients can join without disrupting the whole

system.

• Redundancy: Multiple paths ensure that if one route fails, data can still flow.

• Flexibility: The same architecture supports emails, video calls, online banking, and

social media.

󷈷󷈸󷈹󷈺󷈻󷈼 Chief Takeaways

1. The Internet is a network of networks, built on ISPs, routers, servers, and clients.

2. ISPs provide the gateway to the Internet.

3. Routers direct traffic, ensuring data finds the best path.

4. Servers store and deliver information.

5. Clients request and consume information.

6. Data travels using packet switching, making the system efficient and resilient.

󹶓󹶔󹶕󹶖󹶗󹶘 Conclusion

The Internet may feel like magic, but it is really a masterpiece of engineering. ISPs lay the

roads, routers direct the traffic, servers store the knowledge, and clients like us consume it.

Data zips around the globe in tiny packets, reassembling into videos, messages, or websites

on our screens.

So the next time you click a link or stream a movie, pause for a moment. Behind that instant

response lies a vast, invisible architecture—millions of machines, cables, and protocols

working together in harmony. The Internet is not just technology; it is humanity’s greatest

conversation space, connecting people, ideas, and dreams across the world.

SECTION-B

3. Discuss the architecture of email server and differentiate between POP3 and IMAP

email protocols. Highlight the advantages and disadvantages of each protocol in managing

email on different devices.

Ans: 󹷝󹷞󹷟󹷠󹷡󹷣󹷢 The Story of Email Servers and Their Helpers (POP3 & IMAP)

󷇮󷇭 A New Beginning: Letters in the Digital Age

Long ago, people wrote letters and sent them through the post office. But with the arrival of

the internet, letters turned into emails. Instead of postmen, we now have email servers

that deliver these digital letters in seconds.

Easy2Siksha.com

But just like in the real world, we need a system of post offices and rules for delivery. That’s

where the architecture of an email server and protocols like POP3 and IMAP come into

play.

󷪏󷪐󷪑󷪒󷪓󷪔 The Architecture of an Email Server – The Digital Post Office

Imagine an email server as a post office in a city. This post office has different departments,

each responsible for handling letters in a specific way.

Here’s how it works:

1. Mail User Agent (MUA):

o This is like your personal letterbox at home.

o Examples: Outlook, Gmail app, Thunderbird.

o It’s the software where you write and read emails.

2. Mail Transfer Agent (MTA):

o Think of this as the postman.

o It collects your outgoing letter (email) and delivers it to the right post office

(server) of the receiver.

o Example: Sendmail, Postfix.

3. Mail Delivery Agent (MDA):

o Once the postman reaches the destination post office, the sorting clerk

(MDA) puts the letter in the correct pigeonhole (mailbox).

4. Mail Access Protocols (POP3/IMAP):

o Finally, when the receiver wants to check their mail, they need a system to

retrieve letters from the post office.

o This is where POP3 and IMAP act as two different styles of delivery.

Diagram of Email Server Architecture:

󹷲󹷳󹷴󹷺󹷸󹷹󹷻󹷼󹷽󹷾 POP3 vs IMAP – Two Different Delivery Styles

Now, let’s imagine two types of postmen who deliver your digital letters:

Easy2Siksha.com

󹷤󹷥󹷦󹷧󹷨󹷩󹷪󹷫 1. POP3 (Post Office Protocol version 3) – The Old-School Postman

POP3 works like a postman who delivers letters and then removes them from the post

office.

• When you open your Gmail or Outlook with POP3, the email is downloaded to your

device and usually deleted from the server.

• It’s like the postman handing you the letter and then burning the copy in the post

office.

Advantages of POP3:

1. Offline Access: Once letters (emails) are downloaded, you can read them without

internet.

2. Saves Server Space: Since mails are removed from the server, storage is free.

3. Simple and Fast: Easy to set up and efficient for single-device users.

Disadvantages of POP3:

1. Device Limitation: If you open an email on your laptop, it may not be visible on your

phone because it was removed from the server.

2. Risk of Data Loss: If your device crashes, emails may be lost permanently.

3. No Synchronization: Sent items, drafts, or read/unread status do not sync across

devices.

Best Use: POP3 is ideal for people using one device only, like a personal desktop at home.

󹷤󹷥󹷦󹷧󹷨󹷩󹷪󹷫 2. IMAP (Internet Message Access Protocol) – The Modern Smart Postman

IMAP works like a postman who keeps the letters safely in the post office and gives you

copies whenever you want.

• Emails stay on the server, and you just view or manage them from any device.

• It’s like visiting the post office and reading your letters without taking them away

permanently.

Advantages of IMAP:

1. Multi-device Access: You can read the same emails on your phone, laptop, or office

computer.

2. Synchronization: If you delete or mark an email as read on one device, the change

reflects everywhere.

3. Backup Safety: Since emails stay on the server, you don’t lose them even if your

device crashes.

Disadvantages of IMAP:

Easy2Siksha.com

1. Needs Internet: Emails are stored on the server, so you must stay connected to read

them.

2. Consumes Server Space: Too many stored mails may fill up the server’s storage.

3. Slightly Slower: Accessing large attachments may take longer because data is

fetched from the server each time.

Best Use: IMAP is perfect for students, professionals, or businesses where multiple devices

are used daily.

󽀼󽀽󽁀󽁁󽀾󽁂󽀿󽁃 POP3 vs IMAP – A Quick Comparison

Feature

POP3 (Old Style)

IMAP (Modern Style)

Email Storage

Stored on device

Stored on server

Device Sync

No sync

Full synchronization

Offline Access

Yes

Limited

Server Space

Saves space

Uses space

Best for

Single device users

Multiple device users

󷘹󷘴󷘵󷘶󷘷󷘸 Conclusion: Choosing the Right Postman

So, in our story of email delivery:

• POP3 is like an old-fashioned postman who gives you the letter and never keeps a

copy. Perfect for simple, single-device people.

• IMAP is the modern smart postman, keeping everything safe in the post office while

allowing you to check letters from anywhere, anytime.

In today’s world, where people use mobiles, laptops, and tablets all together, IMAP has

become the preferred choice. Still, POP3 has not vanished—it continues to serve where

simplicity and offline use matter more than synchronization.

4. Discuss the function and key features of a modern web browser. Also discuss rendering,

compatibility, security and privacy issues in browsing. Also discuss the role of browser

extensions.

Ans: One morning, you open your laptop, click on the familiar colorful icon of Chrome or

Firefox, type in www.wikipedia.org, and within seconds, a beautifully formatted page

appears. It feels effortless, almost like magic. But behind this simple act lies one of the most

sophisticated pieces of software we use daily: the modern web browser.

Easy2Siksha.com

A browser is not just a window to the Internet—it is a translator, a guard, a performer, and

even a personal assistant. To understand it fully, let’s explore its functions, key features,

rendering process, compatibility issues, security and privacy concerns, and the role of

extensions.

󷊆󷊇 What is a Web Browser?

A web browser is an application software that allows users to access, retrieve, and interact

with information on the World Wide Web. It communicates with web servers using

protocols like HTTP/HTTPS, fetches content (HTML, CSS, JavaScript, images, videos), and

then renders it into the interactive pages we see.

In short:

• Client side: Browser = user’s tool.

• Server side: Websites = information providers.

• Bridge: Browser fetches and displays.

󷈷󷈸󷈹󷈺󷈻󷈼 Functions of a Modern Browser

1. Fetching Content:

o The browser sends requests to servers and fetches web pages.

o Example: When you type www.bbc.com, the browser contacts the server,

retrieves the HTML, CSS, and scripts.

2. Rendering Pages:

o Converts raw code into a visual, interactive page.

o Without rendering, you’d only see lines of code.

3. Navigation:

o Provides back, forward, refresh, and home buttons.

o Allows multiple tabs and windows.

4. Security:

o Warns against unsafe sites, blocks pop-ups, and supports encryption (HTTPS).

5. Customization:

o Users can change themes, install extensions, and set preferences.

6. Data Management:

o Stores cookies, cache, history, and passwords for convenience.

󷈷󷈸󷈹󷈺󷈻󷈼 Key Features of Modern Browsers

• Address Bar (Omnibox): Enter URLs or search queries.

• Tabs: Open multiple sites in one window.

• Bookmarks: Save favorite sites.

• Private/Incognito Mode: Browse without saving history.

• Download Manager: Track and manage downloads.

• Synchronization: Sync bookmarks, history, and passwords across devices.

• Extensions/Add-ons: Enhance functionality (e.g., ad blockers, grammar checkers).

• Cross-platform Availability: Works on Windows, macOS, Linux, Android, iOS.

Easy2Siksha.com

󽀼󽀽󽁀󽁁󽀾󽁂󽀿󽁃 The Rendering Process

Rendering is the heart of the browser. It is how code becomes a page.

Steps of Rendering:

1. Parsing HTML: Browser reads the HTML file and builds a DOM (Document Object

Model) tree.

2. Parsing CSS: Stylesheets are read and combined with DOM to form a Render Tree.

3. Layout: The browser calculates the position and size of each element.

4. Painting: Colors, borders, and text are filled in.

5. Compositing: Layers are combined and displayed on screen.

Diagram (simplified):

[HTML + CSS + JS] → [DOM + CSSOM] → [Render Tree] → [Layout] → [Painting] → [Screen

Output]

This process happens in milliseconds, giving us smooth browsing.

󷇮󷇭 Compatibility Issues

Not all browsers interpret code the same way. This leads to compatibility challenges:

• Different Rendering Engines:

o Chrome/Edge: Blink

o Firefox: Gecko

o Safari: WebKit

• A website may look slightly different across browsers.

• Legacy Support: Older browsers may not support modern HTML5/CSS3 features.

• Cross-device Issues: A site may work on desktop but break on mobile.

Solution: Developers use responsive design and test across browsers.

󹺣󹺤󹺥 Security Issues in Browsing

Browsers are gateways to the Internet, so they face constant threats:

1. Phishing Attacks: Fake websites trick users into giving personal data.

2. Malware Downloads: Harmful files disguised as software.

3. Man-in-the-Middle Attacks: Intercepting unencrypted traffic.

4. Malicious Scripts: JavaScript exploits vulnerabilities.

Browser Security Features:

• HTTPS enforcement.

• Sandboxing (isolating tabs).

Easy2Siksha.com

• Automatic updates.

• Warning messages for unsafe sites.

󹿶󹿷󹿸󹿹󹿺󹿻󹿼󹿽󹿾󹿿󺀍󺀎󺀀󺀁󺀂󺀃󺀄󺀅󺀆󺀇󺀏󺀐󺀈󺀑󺀒󺀉󺀓󺀊󺀋󺀌 Privacy Issues in Browsing

Privacy is as important as security. Browsers often collect data:

• Cookies: Track user behavior across sites.

• Fingerprinting: Identifying users by device/browser settings.

• History Tracking: Advertisers build profiles of users.

Privacy Features in Modern Browsers:

• Incognito/Private Mode.

• Blocking third-party cookies.

• “Do Not Track” requests.

• Built-in ad and tracker blockers (e.g., Brave, Firefox).

󷈷󷈸󷈹󷈺󷈻󷈼 Role of Browser Extensions

Extensions are like apps for your browser. They add extra features.

Examples:

• AdBlock: Blocks intrusive ads.

• Grammarly: Checks grammar in real-time.

• LastPass: Manages passwords securely.

• Dark Reader: Enables dark mode on all sites.

Benefits:

• Personalization.

• Productivity boost.

• Enhanced security (e.g., VPN extensions).

Risks:

• Some extensions may be malicious or collect data.

• Too many extensions can slow down the browser.

Thus, extensions are powerful but must be used wisely.

󹶓󹶔󹶕󹶖󹶗󹶘 Story Analogy

Think of a browser as a theatre performance:

• Script (HTML, CSS, JS): The written play.

• Rendering Engine: The director who interprets the script.

Easy2Siksha.com

• Actors (DOM elements): Characters on stage.

• Stage (Screen): Where the play unfolds.

• Security Guards: Ensure no troublemakers enter.

• Audience (User): Enjoys the show.

• Extensions: Extra props or lighting effects that enhance the performance.

󷈷󷈸󷈹󷈺󷈻󷈼 Chief Takeaways

1. A web browser is the gateway to the Internet, fetching and rendering content.

2. Functions: Fetching, rendering, navigation, security, customization.

3. Features: Tabs, bookmarks, private mode, synchronization, extensions.

4. Rendering: Converts code into visual pages via DOM, CSSOM, layout, and painting.

5. Compatibility Issues: Different engines and devices may display sites differently.

6. Security Issues: Phishing, malware, malicious scripts—handled by HTTPS,

sandboxing, updates.

7. Privacy Issues: Cookies, tracking, fingerprinting—handled by private mode, blockers.

8. Extensions: Enhance functionality but must be used carefully.

󹶓󹶔󹶕󹶖󹶗󹶘 Conclusion

The modern web browser is not just a tool—it is our digital companion. It translates code

into experiences, protects us from threats, respects (or sometimes invades) our privacy, and

adapts to our needs through extensions.

So the next time you open Chrome, Firefox, Safari, or Edge, remember: behind that simple

window lies a complex orchestra of engines, protocols, and safeguards, all working together

to make the Internet accessible, safe, and enjoyable.

SECTION-C

5. Discuss the architecture and working of file transfer protocol. Also discuss

authentication and other security issues with FTP and its role in web deployment.

Ans: 󷇮󷇭 The Story Begins: A Post Office for the Digital World

Think about how people used to send letters before WhatsApp, emails, or instant

messaging. You would go to a post office, hand over your letter, provide the recipient’s

address, and the postal system would make sure it reached the right person.

Now, in the digital world, we also need a kind of “post office” that moves files (letters,

parcels) between computers (houses). That “post office” is called File Transfer Protocol

(FTP). It is one of the oldest and most trusted methods to transfer files over the internet.

Easy2Siksha.com

Let’s walk step by step through the architecture, working, security, and role of FTP in a way

that feels like we are visiting a digital post office.

󷩡󷩟󷩠 Architecture of FTP – The Post Office Setup

FTP works on a Client-Server architecture. Imagine there are two main characters in this

story:

1. FTP Client (the sender or receiver) – This is like you, who goes to the post office with

a file. Examples: FileZilla, Cyberduck, WinSCP.

2. FTP Server (the post office) – This is where the files are stored, managed, and sent

out to others when requested.

The internet connection acts as the “roads” that connect you (client) to the post office

(server).

Diagram of FTP Architecture

So, whenever you want to upload (send a parcel) or download (receive a parcel), you

interact with the FTP server through the client.

󽁌󽁍󽁎 How FTP Works – The File Journey

Now let’s follow the step-by-step journey of a file in FTP:

1. Connection Established

o First, the client connects to the FTP server using an IP address and port

number (usually 21).

Easy2Siksha.com

o Just like you show your ID card at the post office, here you provide a

username and password (or sometimes anonymous login).

2. Two Channels of Communication

FTP uses not one, but two separate channels, like two counters at the post office:

o Control Channel (Counter for instructions): This is used for commands like

“Upload this file” or “Download that file.”

o Data Channel (Counter for parcels): This is where the actual file (the parcel)

moves.

This separation makes FTP efficient because the control channel remains free for

commands while the data channel handles the heavy lifting.

3. Modes of Operation

FTP can operate in two ways:

o Active Mode: The server takes the lead in creating the data channel.

o Passive Mode: The client takes the lead. (This is often used in modern

firewalls to avoid issues.)

4. Uploading and Downloading

o Uploading: You send a file from your computer to the FTP server (like

submitting a parcel at the post office).

o Downloading: You receive a file from the FTP server to your computer (like

collecting a parcel someone sent you).

5. Session End

Once the files are transferred, the connection closes—just like you leave the post

office after finishing your work.

󹺟󹺠󹺡󹺞 Authentication and Security Issues in FTP

Now let’s talk about the security concerns, because just like in real life, parcels can be stolen

or tampered with if not handled carefully.

1. Authentication

• Traditionally, FTP uses username and password to verify identity.

• But the big problem is: these credentials are sent as plain text (like writing your

password on a postcard instead of sealing it in an envelope).

• Anyone who intercepts the network can read them.

2. Other Security Issues

• Data in Plain Text: Not only passwords but also the actual files are sent without

encryption. This means a hacker can capture and read the data.

• Man-in-the-Middle Attack: Someone could secretly sit between the client and server

and steal information.

Easy2Siksha.com

• Unauthorized Access: Weak passwords or open FTP servers can allow strangers to

enter.

󺬥󺬦󺬧 Solutions to FTP Security Problems

To make FTP more secure, new versions and alternatives were developed:

1. FTPS (FTP Secure)

o Adds SSL/TLS encryption to the normal FTP.

o Now, the data and passwords are locked in an “envelope,” making it harder

for hackers to read.

2. SFTP (SSH File Transfer Protocol)

o Works over Secure Shell (SSH).

o Unlike FTPS, which is an extension, SFTP is a different protocol but serves the

same purpose.

o It is widely used because it ensures strong encryption and secure file

transfers.

3. Anonymous FTP (Limited Access)

o Some servers allow “anonymous login” where anyone can access files

without a password, usually for downloading free/public data.

o But this must be handled carefully to avoid misuse.

󷇳 Role of FTP in Web Deployment

Now comes the exciting part—how FTP is used in the real world, especially in web

development and deployment.

Imagine you have built a website on your computer, and now you want the whole world to

see it. Your website must live on a web server. How do you move your website files (HTML,

CSS, images, videos) from your personal computer to that server?

The answer: FTP.

Steps in Web Deployment Using FTP

1. A web developer designs the site on their local machine.

2. They connect to the web host’s FTP server using credentials.

3. They upload all the files (like “index.html,” images, stylesheets).

4. The server stores them, and when users type your website URL, the files are served

to them.

So, FTP acts as the bridge between the developer’s local work and the live website on the

internet.

Easy2Siksha.com

Even today, many hosting providers (like Bluehost, HostGator, GoDaddy) give customers FTP

access to manage their websites.

󽀼󽀽󽁀󽁁󽀾󽁂󽀿󽁃 FTP: Advantages and Disadvantages

Advantages

• Simple and effective for moving large files.

• Widely supported across platforms.

• Can be automated for regular transfers.

Disadvantages

• Lack of security in traditional FTP.

• Needs additional setup for encryption (FTPS, SFTP).

• Not ideal for extremely sensitive data without extra protection.

󹴞󹴟󹴠󹴡󹶮󹶯󹶰󹶱󹶲 Conclusion: The Old but Trusted Post Office

FTP, like an old post office, may feel traditional compared to modern couriers (cloud

storage, Google Drive, etc.), but it still plays an important role. It introduced the world to

structured file transfer, and with secure versions like SFTP and FTPS, it remains a backbone

of web deployment and data exchange.

So, next time you open a website, remember that behind the scenes, someone might have

uploaded those files through FTP, just like sending a parcel at a digital post office.

6. Explain the importance of website performance optimization in web designing. Discuss

techniques and strategies to improve website speed, including image optimization,

caching and code minification.

Ans: 󷊆󷊇 Why Website Performance Optimization Matters

1. User Experience (UX)

• Studies show that users expect a website to load in under 3 seconds.

• A delay of even one second can frustrate users and increase the “bounce rate”

(when visitors leave without exploring).

• A fast website feels smooth, professional, and trustworthy.

Easy2Siksha.com

2. Search Engine Optimization (SEO)

• Google and other search engines use page speed as a ranking factor.

• Faster websites appear higher in search results, bringing more organic traffic.

3. Conversions and Revenue

• For e-commerce sites, speed directly impacts sales.

• Amazon once reported that a 100-millisecond delay could cost them millions in lost

revenue.

4. Mobile Optimization

• With most users browsing on mobile, speed is even more critical. Mobile networks

can be slower, so optimization ensures smooth performance everywhere.

5. Cost Savings

• Optimized websites use less bandwidth and server resources.

• This reduces hosting costs and improves scalability.

In short, performance optimization is like tuning a car engine: it doesn’t just make the ride

smoother, it makes the entire journey more efficient and enjoyable.

󷈷󷈸󷈹󷈺󷈻󷈼 Techniques and Strategies to Improve Website Speed

Now let’s look at the practical tools in a web designer’s toolkit.

1. Image Optimization

Images are often the heaviest elements on a webpage. In fact, they can make up more than

60% of a page’s total size. Optimizing them is one of the quickest wins for performance.

How to Optimize Images:

• Choose the Right Format:

o Use JPEG for photos (smaller size, good quality).

o Use PNG for graphics with transparency.

o Use WebP or AVIF for modern, highly compressed formats.

• Compress Images:

o Tools like TinyPNG or ImageOptim reduce file size without noticeable quality

loss.

• Responsive Images:

o Serve different image sizes for different devices (mobile vs desktop).

• Lazy Loading:

o Load images only when they appear in the user’s viewport, not all at once.

Impact:

Easy2Siksha.com

• Reduces page weight.

• Improves load time dramatically.

• Enhances user experience, especially on mobile.

2. Caching

Caching is like memory. Instead of fetching everything from scratch each time, the browser

or server stores copies of files for reuse.

Types of Caching:

• Browser Caching:

o Stores static files (CSS, JS, images) on the user’s device.

o Next time the user visits, the browser loads them instantly from local storage.

• Server-Side Caching:

o Stores pre-generated pages on the server, reducing the need to rebuild them

for every request.

• Content Delivery Network (CDN):

o Distributes cached copies of your site across servers worldwide.

o Users are served content from the nearest server, reducing latency.

Impact:

• Faster repeat visits.

• Reduced server load.

• Global performance boost.

3. Code Minification

Websites rely on code—HTML, CSS, and JavaScript. But developers often write code with

spaces, comments, and formatting for readability. While great for humans, this adds

unnecessary weight for machines.

What is Minification?

• The process of removing extra spaces, comments, and line breaks.

• Example:

/* Before */

body {

background-color: white;

margin: 0;

}

/* After */

body{background-color:#fff;margin:0;}

Tools for Minification:

Easy2Siksha.com

• UglifyJS, CSSNano, HTMLMinifier.

• Many build tools (Webpack, Gulp) automate this.

Impact:

• Smaller file sizes.

• Faster downloads.

• Quicker rendering.

4. Other Supporting Strategies

While images, caching, and minification are the big three, other techniques also matter:

• Reduce HTTP Requests: Combine files where possible.

• Use Asynchronous Loading: Load JavaScript without blocking page rendering.

• Optimize Fonts: Use modern, lightweight web fonts.

• Enable GZIP/Brotli Compression: Compress files before sending them over the

network.

• Monitor Performance: Tools like Google PageSpeed Insights or Lighthouse help

identify bottlenecks.

󹶓󹶔󹶕󹶖󹶗󹶘 Diagram: Website Optimization Flow

Here’s a simple conceptual diagram:

[User Request]

↓

[Server/Cache/CDN] → [Optimized Images + Minified Code] → [Browser Rendering]

↓

[Fast, Smooth Website Experience]

This shows how optimization techniques work together to deliver speed.

󼩺󼩻 Story Analogy

Think of a website as a restaurant:

• Images are like the dishes. If they’re too heavy or oversized, customers (users) feel

sluggish. Optimized images are like perfectly portioned meals—delicious but light.

• Caching is like meal prep. Instead of cooking from scratch every time, the chef

(server) keeps some dishes ready to serve instantly.

• Code Minification is like cleaning up the kitchen. Removing clutter makes everything

run faster and smoother.

Together, these strategies ensure that customers (users) leave satisfied and come back for

more.

Easy2Siksha.com

󷈷󷈸󷈹󷈺󷈻󷈼 Chief Takeaways

1. Website performance optimization is essential for user experience, SEO,

conversions, mobile usability, and cost savings.

2. Image Optimization reduces page weight and speeds up loading.

3. Caching stores reusable content, reducing server load and improving speed.

4. Code Minification trims unnecessary characters, making files smaller and faster.

5. Supporting strategies like compression, asynchronous loading, and CDNs further

enhance performance.

󹶓󹶔󹶕󹶖󹶗󹶘 Conclusion

In web design, beauty and creativity matter—but speed is the invisible foundation that

holds everything together. A slow website, no matter how pretty, will drive users away. A

fast website, even if simple, will win hearts and clicks.

By focusing on image optimization, caching, and code minification, designers and

developers can ensure that their websites are not just visually appealing but also lightning

fast. In the end, performance optimization is not just about technology—it’s about

respecting the user’s time and delivering an experience that feels effortless.

So the next time you click on a site and it loads instantly, remember: behind that speed lies

a thoughtful design, careful optimization, and a commitment to excellence.

SECTION-D

7. Explain the concept of HTML lists. Differentiate between ordered and unordered lists

and describe how to create nested lists using HTML. Provide examples to illustrate your

points.

Ans:  The Story Begins: A Grocery Shopping Day

Imagine you are going shopping. You grab a notebook and start writing down what you

need. Sometimes you write numbers (1, 2, 3) because you want a specific order, like the

steps of a recipe. Other times, you just put bullet points (•) when the order doesn’t matter,

like your grocery items.

This simple act of writing lists in your notebook is very similar to how HTML lists work on a

webpage. Just like your notebook organizes items clearly, HTML lists organize content neatly

for readers and users.

 What is an HTML List?

Easy2Siksha.com

In the world of web design, an HTML list is a way to organize and display items in a

structured form. It allows web designers to:

• Show data in an ordered or unordered format.

• Make content easy to read and scan.

• Present information like menus, steps, or points.

HTML mainly provides three types of lists:

1. Ordered List (<ol>) – like numbered steps.

2. Unordered List (<ul>) – like bullet points.

3. Definition List (<dl>) – used for definitions (less common but useful).

For now, let’s focus on ordered lists, unordered lists, and nested lists since these are most

commonly used.

 Ordered Lists – The Numbered Notebook

Imagine you are writing down the steps to make a cup of tea. The order matters because if

you pour milk before boiling water, it won’t work properly.

In HTML, such lists are created using the <ol> (ordered list) tag along with <li> (list item)

tags.

Example:

<h3>Steps to Make Tea</h3>

<ol>

<li>Boil water</li>

<li>Add tea leaves</li>

<li>Add sugar</li>

<li>Stir well and serve</li>

</ol>

Output:

1. Boil water

2. Add tea leaves

3. Add sugar

4. Add milk

5. Stir well and serve

 Why use ordered lists?

Because the sequence of steps is important. Ordered lists are best for instructions, rankings,

or processes.

Easy2Siksha.com

 Unordered Lists – The Grocery Bag

Now, think about your grocery list: Milk, Bread, Eggs, Butter. Here, the order doesn’t

matter. You can pick up eggs before bread or milk after butter—it won’t affect your

shopping.

For such cases, HTML uses <ul> (unordered list) with <li> (list item).

Example:

<h3>Grocery List</h3>

<ul>

<li>Bread</li>

<li>Butter</li>

</ul>

Output:

• Bread

• Milk

• Eggs

• Butter

 Why use unordered lists?

Because the order is not important. They are best for menus, features, points, and

collections.

 Difference Between Ordered and Unordered Lists

Here’s a simple comparison table:

Feature

Ordered List (<ol>)

Unordered List (<ul>)

Appearance

Items are numbered (1, 2, 3)

Items have bullets (•)

Order importance

Order matters

Order doesn’t matter

Common use

Recipes, steps, rankings, surveys

Grocery list, menus, key points

HTML tag

 Nested Lists – Lists Inside Lists

Sometimes, life is not that simple. You may have a main list but also sub-lists inside it. For

example, if you’re preparing for a party, your shopping list may look like this:

Easy2Siksha.com

• Drinks

o Juice

o Soda

• Snacks

o Chips

o Cookies

• Decorations

o Balloons

o Candles

In HTML, we call this a nested list (a list inside another list).

Example:

<h3>Party Preparation List</h3>

<ul>

<li>Drinks

<ul>

<li>Juice</li>

</ul>

</li>

<li>Snacks

<ul>

<li>Chips</li>

<li>Cookies</li>

</ul>

</li>

<li>Decorations

<ul>

<li>Balloons</li>

<li>Candles</li>

</ul>

</li>

</ul>

Output:

• Drinks

o Juice

o Soda

• Snacks

o Chips

o Cookies

• Decorations

o Balloons

o Candles

Easy2Siksha.com

 Why use nested lists?

Because sometimes information has categories and subcategories. Nested lists help

organize content hierarchically.

 Real-Life Applications of HTML Lists

HTML lists are everywhere once you start noticing them!

1. Navigation Menus: The links at the top of a website (“Home | About | Contact”) are

usually created using unordered lists.

2. Instructions: Websites like cooking blogs use ordered lists for recipes.

3. Product Features: Online stores use unordered lists to highlight product features.

4. Exam Questions or Syllabus: Institutions often use ordered lists to show structured

information.

 Diagram Representation

Here’s a simple diagram to visualize lists:

Ordered List (<ol>)

1. Item One

2. Item Two

3. Item Three

Unordered List (<ul>)

• Item One

• Item Two

• Item Three

Nested List

• Main Item 1

- Sub Item 1.1

- Sub Item 1.2

• Main Item 2

- Sub Item 2.1

 Conclusion

Lists in HTML are like the backbone of organized content. Just like you need a notebook to

organize your shopping or tasks, websites need lists to organize their information.

• Ordered lists are like step-by-step guides where sequence matters.

Easy2Siksha.com

• Unordered lists are like casual bullet points where order doesn’t matter.

• Nested lists are like main topics with subtopics, giving a clean structure.

So, whether you’re cooking, shopping, planning a party, or designing a website, lists are

your best friend for clarity and order.

8. Describe the use of HTML tables in website design. Explain how to create a simple table,

merge cells and add headers and footers to a table. Discuss when tables should be used

and when other layout techniques are more appropriate.

Ans: Imagine you are designing a restaurant’s website. You want to show the menu in a

neat, organized way: dishes in one column, prices in another, and maybe a third column for

availability. If you simply write them as paragraphs, the page looks messy. But if you arrange

them in rows and columns, suddenly everything looks clean and professional. This is where

HTML tables come in—they are like invisible grids that help us organize information on a

webpage.

In this essay, we’ll explore the use of HTML tables in website design, learn how to create a

simple table, how to merge cells, how to add headers and footers, and finally discuss when

tables are appropriate and when other layout techniques (like CSS grids or flexbox) are

better.

 The Role of Tables in Website Design

Tables in HTML were originally created to display tabular data—information that naturally

fits into rows and columns, like schedules, price lists, or comparison charts.

• Good Uses:

o Product price lists

o Timetables (bus, train, class schedules)

o Financial reports

o Comparison charts (e.g., comparing features of mobile phones)

• Not Recommended Uses:

o Entire page layouts (this was common in the 1990s, but now CSS is better for

layouts).

o Decorative purposes (tables should be for data, not design tricks).

So, think of tables as spreadsheets inside a webpage—perfect for structured data, but not

for everything.

 Creating a Simple HTML Table

The basic structure of an HTML table uses a few key tags:

• <table> → Defines the table.

Easy2Siksha.com

• <tr> → Table row.

• <td> → Table data cell.

• <th> → Table header cell (bold and centered by default).

Example: A Simple Table

<tr>

<th>Price</th>

<th>Available</th>

</tr>

<tr>

<td>Paneer Butter Masala</td>

</tr>

<tr>

<td>Dal Tadka</td>

</tr>

</table>

Output (conceptual):

Dish

Price

Available

Paneer Butter Masala

₹250

Yes

Dal Tadka

₹180

This simple table already looks neat and structured.

 Merging Cells in a Table

Sometimes, you want a cell to span across multiple columns or rows. For example, in a

timetable, you may want “Lunch Break” to cover two columns.

• colspan → Merges cells horizontally (across columns).

• rowspan → Merges cells vertically (across rows).

Example: Using colspan

<tr>

<th colspan="2">Schedule</th>

</tr>

<tr>

<td>Monday</td>

Easy2Siksha.com

<td>Science</td>

</tr>

</table>

Output (conceptual):

Day

Schedule (spans 2 columns)

Monday

Math

Science

Example: Using rowspan

html

<tr>

<th>Subject</th>

</tr>

<tr>

<th>Marks</th>

</tr>

<tr>

</tr>

</table>

Here, “Name” spans two rows.

 Adding Headers and Footers

HTML provides special tags to group table sections:

• <thead> → Groups the header rows.

• <tbody> → Groups the body rows.

• <tfoot> → Groups the footer rows.

This is useful for large tables, making them easier to style and manage.

Example: Table with Header and Footer

html

<thead>

<tr>

<th>Product</th>

<th>Quantity</th>

<th>Price</th>

</tr>

Easy2Siksha.com

</thead>

<tbody>

<tr>

<td>Laptop</td>

</tr>

<tr>

<td>Mouse</td>

</tr>

</tbody>

<tfoot>

<tr>

<td colspan="2">Total</td>

</tr>

</tfoot>

</table>

Output (conceptual):

Product

Quantity

Price

Laptop

₹50,000

Mouse

₹500

Total (footer)

₹1,02,500

Notice how the footer row uses colspan="2" to merge two cells.

 When to Use Tables vs Other Layout Techniques

 Use Tables When:

• You are displaying tabular data (rows and columns).

• You need to show comparisons, schedules, or structured reports.

• Accessibility is important (screen readers can interpret tables well if coded properly).

 Avoid Tables When:

• You are designing the overall layout of a webpage (header, sidebar, footer).

• You want a responsive design that adapts to mobile screens.

• You are creating complex designs (CSS Flexbox and Grid are better).

Modern Alternatives:

• CSS Flexbox: Great for one-dimensional layouts (rows or columns).

• CSS Grid: Perfect for two-dimensional layouts (rows and columns combined).

Easy2Siksha.com

So, while tables are still essential, they should be used wisely—only for data, not for design

structure.

 Story Analogy

Think of a table as a school classroom seating chart:

• Each desk (cell) has a student (data).

• Rows represent different benches.

• Columns represent different categories (like roll number, subject, marks).

• Sometimes, one student takes up two desks (colspan/rowspan).

• The teacher’s name at the top is the header, and the summary at the end of the

exam is the footer.

This analogy shows how tables bring order and clarity.

 Diagram: HTML Table Structure

This diagram shows the hierarchy of a table.

 Chief Takeaways

1. HTML tables organize data into rows and columns.

2. Basic tags: <table>, <tr>, <td>, <th>.

3. Merging cells: Use colspan (horizontal) and rowspan (vertical).

4. Headers and Footers: Use <thead>, <tbody>, <tfoot> for structure.

5. Best practice: Use tables for data, not for page layouts.

6. Modern layouts: Use CSS Flexbox or Grid instead of tables for design.

 Conclusion

HTML tables are like the unsung heroes of web design. They may not be flashy, but they

bring order to chaos. They make data readable, comparisons easy, and reports professional.

However, like any tool, they must be used wisely. For structured data, tables are perfect. For

layouts and design, modern CSS techniques are better.

Easy2Siksha.com

So, the next time you design a website, remember: tables are your spreadsheet on the

web—powerful, precise, and indispensable when used in the right place.

“This paper has been carefully prepared for educational purposes. If you notice any mistakes or

have suggestions, feel free to share your feedback.”